<template>
    <div class="addMerchant">
        <div class="merchant-info">
            <ul>
                <el-form ref="ruleForm" :model="addMerchant" :inline="true" :rules="userRules" label-width="180px" label-suffix=":">
                    <div class="formTit">
                        <span class="serialNumber">01</span>
                        <span class="formName">店铺信息</span>
                    </div>
                    <li>
                        <!-- <el-form-item label="店铺logo" prop="shopLogo">
                            <el-upload
                                class="upload-demo"
                                action="uploadurl"
                                list-type="picture-card"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :http-request="uploadHttpLogo"
                                ref="uploadFileLogo"
                                :show-file-list="false"
                                v-model="addMerchant.shopLogo">
                                <img v-if="addMerchant.shopLogo" :src="addMerchant.shopLogo" class="avatar"  width="148" height="148"/>
                                <i v-else class="el-icon-plus"></i>
                            </el-upload>
                            <p>请上传1:1的图片</p>
                        </el-form-item> -->
                        <shopLogoDialog @shopLogoChild="shopLogoChild"></shopLogoDialog>
                    </li>
                    <li>
                        <!-- <el-form-item label="门头照" prop="doorCard">
                            <el-upload
                                class="upload-demo"
                                action="uploadurl"
                                list-type="picture-card"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :http-request="uploadHttpDc"
                                ref="uploadFileDc"
                                :show-file-list="false"
                                v-model="addMerchant.doorCard">
                                <img v-if="addMerchant.doorCard" :src="addMerchant.doorCard" class="avatar"  width="148" height="148"/>
                                <i v-else class="el-icon-plus"></i>
                            </el-upload>
                            <p>请上传1:1的图片</p>
                        </el-form-item> -->
                        <doorCardDialog @doorCardChild="doorCardChild"></doorCardDialog>
                    </li>
                    <li>
                    <!-- action="https://ceshi3.cklock.cn/adminchoice/file/upload"  https://saihanyun.cklock.cn/adminchoice/file/upload-->
                        <!-- <el-form-item label="店内照片" prop="shopImg">
                            <el-upload 
                                class="upload-demo"
                                action="https://ceshi3.cklock.cn/adminchoice/file/upload" 
                                :show-file-list="true"
                                list-type="picture-card" 
                                :limit="2" 
                                multiple
                                :on-success="handleShopImg"
                                :on-preview="handlePreview"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :on-remove="handleRemoveShopImg"
                                :before-remove="beforeRemove"
                                ref="uploadFileSi">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <p>请上传1:1图片</p>
                        </el-form-item> -->
                        <shopImgDialog @shopImgChild="shopImgChild"></shopImgDialog>
                    </li>
                    <li>
                        <el-form-item label="店铺名称" prop="shopName">
                            <el-input v-model="addMerchant.shopName" placeholder="请输入店铺名称" />
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="店铺负责人" prop="chargePersonName">
                            <el-input v-model="addMerchant.chargePersonName" placeholder="请输入负责人名字" />
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="负责人手机号" prop="chargePersonPhone">
                            <el-input v-model="addMerchant.chargePersonPhone" placeholder="请输入店铺手机号" />
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="客服电话" prop="servicePhone">
                            <el-input v-model="addMerchant.servicePhone" placeholder="请输入客服电话" />
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="配送时间">
                             <p> 
                                    上午
                                <el-time-picker v-model="takeTime1" placeholder="请选择" style="width:25%"  format='HH:mm' value-format="HH:mm"></el-time-picker>
                                    下午  
                                <el-time-picker v-model="takeTime2" placeholder="请选择" style="width:25%"  format='HH:mm' value-format="HH:mm"></el-time-picker>
                            </p>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="备注">
                            <p> 
                                当日
                                <el-time-picker v-model="endTime1" placeholder="请选择" style="width:40%"  format='HH:mm' value-format="HH:mm"></el-time-picker>
                                前下单，最早送达时间上午{{takeTime1}}
                            </p>
                            <p style="margin-top:3px;">
                                当日
                                <el-time-picker v-model="endTime2" placeholder="请选择" style="width:40%"  format='HH:mm' value-format="HH:mm"></el-time-picker>
                                前下单，最早送达时间下午{{takeTime2}}
                            </p>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="起送金额" prop="upAmount">
                            <el-input
                            placeholder="请输入起送金额"
                            v-model="addMerchant.upAmount"
                            >
                            <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="店铺地址" prop="shopAdressProvince">
                            <el-cascader
                            :options="options"
                            v-model="selectedOptions"
                            @change="addressChange"
                            clearable 
                            class="PVC" size="large"
                            >
                            </el-cascader>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="详细地址" prop="shopAdressDetail">
                            <el-input
                            maxlength="200"
                            resize="none"
                            placeholder="请输入详细地址"
                            type="textarea"
                            :rows="3"
                            v-model="addMerchant.shopAdressDetail"
                            ></el-input>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="地图">
                            <mapDrag
                                @drag="dragMap"
                                :MapCityName="MapCityName"
                                :lat="lat"
                                :lng="lng"
                                class="mapbox"
                            ></mapDrag>
                            <span> 经度:{{ dragData.lng }}</span>
                            <span> 维度:{{ dragData.lat }}</span>
                            <br />
                            <span> 城市编码:{{ addMerchant.citycode }}</span>
                            <span> 区域编码:{{ addMerchant.adcode }}</span>
                        </el-form-item>
                    </li>
                    <div class="formTit">
                        <span class="serialNumber">02</span>
                        <span class="formName">主体信息</span>
                    </div>
                    <li>
                        <el-form-item label="企业名称" prop="enterpriseName">
                            <el-input
                            maxlength="100"
                            placeholder="请输入企业名称"
                            v-model="addMerchant.enterpriseName"
                            ></el-input>
                            <p>
                            需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核审核成功后企业名称不可修改
                            </p>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="社会信用代码" prop="enterpriseCode">
                            <el-input
                            maxlength="100"
                            placeholder="请输入社会信用代码"
                            v-model="addMerchant.enterpriseCode"
                            ></el-input>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="注册手机号" prop="shopPhone">
                            <el-input
                            maxlength="100"
                            placeholder="请输手机号"
                            v-model="addMerchant.shopPhone"
                            :disabled="EditDisable"
                            ></el-input>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="注册地址" prop="enterpriseRegion">
                            <el-cascader
                            size="large"
                            :options="options"
                            v-model="registeredAddress"
                            @change="registeredAddressChange"
                            class="Register"
                            >
                            </el-cascader>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item label="详细地址" prop="enterpriseAdress">
                            <el-input
                            maxlength="200"
                            resize="none"
                            placeholder="请输入详细地址"
                            type="textarea"
                            :rows="3"
                            v-model="addMerchant.enterpriseAdress"
                            ></el-input>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item
                            label="营业期限"
                            prop="enterpriseStartTime"
                            class="businessDate"
                            >
                            <el-date-picker
                                v-model="addMerchant.enterpriseStartTime"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <span class="description">至</span>
                        <el-form-item
                            label=""
                            prop="enterpriseEndTime"
                            class="businessDate"
                            >
                            <el-date-picker
                                v-model="addMerchant.enterpriseEndTime"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </li>
                    <li style="margin-top: 0; position: relative; bottom: 20px; ">
                        <el-form-item label="提示">
                            <p>
                                请填写营业执照上的营业期限 注意参照示例中的格式
                                结束时间需大于开始时间 有效期必须大于60天
                            </p>
                        </el-form-item>
                    </li>
                    <li style="margin-top: 0;">
                        <!-- <el-form-item label="营业执照" prop="enterpriseLicense">
                            <el-upload
                                class="upload-demo"
                                action="uploadurl"
                                list-type="picture-card"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="1"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :http-request="handleHandHeld"
                                ref="uploadFileHeld"
                                :show-file-list="false"
                                v-model="addMerchant.enterpriseLicense">
                                <img v-if="addMerchant.enterpriseLicense" :src="addMerchant.enterpriseLicense" class="avatar"  width="148" height="148"/>
                                <i v-else class="el-icon-plus"></i>
                            </el-upload>
                            <p>请上传4:3的图片</p>
                            <p>
                            仅支持在有效期内的中国大陆工商局或市场监督管理局颁发的工商营业执照。格式要求：原证照片、扫描件或者
                            复印件加盖企业公章后的扫描
                            </p>
                        </el-form-item> -->
                        <enterpriseLicenseDialog @enterpriseLicenseChild="enterpriseLicenseChild"></enterpriseLicenseDialog>
                    </li>
                    <li>
                        <!-- <el-form-item label="食品经营许可证" prop="foodCard">
                            <el-upload
                                class="upload-demo"
                                action="uploadurl"
                                list-type="picture-card"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="1"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :http-request="handleLicense"
                                ref="uploadFileLicense"
                                :show-file-list="false"
                                v-model="addMerchant.foodCard">
                                <img v-if="addMerchant.foodCard" :src="addMerchant.foodCard" class="avatar"  width="148" height="148"/>
                                <i v-else class="el-icon-plus"></i>
                            </el-upload>
                            <p>请上传4:3的图片</p>
                        </el-form-item> -->
                        <foodCardDialog @foodCardChild="foodCardChild"></foodCardDialog>
                    </li>
                    <div class="formTit">
                        <span class="serialNumber">03</span>
                        <span class="formName">经营者信息</span>
                    </div>
                    <li>
                        <el-form-item label="经营者姓名" prop="enterpriseOperator">
                            <el-input
                            maxlength="100"
                            placeholder="请输入经营者姓名"
                            v-model="addMerchant.enterpriseOperator"
                            ></el-input>
                        </el-form-item>
                    </li>
                    <!-- <li>
                        <el-form-item
                            label="证件类型"
                            prop="enterpriseCardType"
                            class="idType"
                        >
                            <el-select
                            v-model="addMerchant.enterpriseCardType"
                            placeholder="请选择"
                            >
                            <el-option
                                v-for="item in idCardList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                            </el-select>
                        </el-form-item>
                    </li> -->
                    <li>
                        <el-form-item label="身份证号码" prop="enterpriseIdCard">
                            <el-input
                            maxlength="100"
                            placeholder="请输入身份证号码"
                            v-model="addMerchant.enterpriseIdCard"
                            ></el-input>
                        </el-form-item>
                    </li>
                    <li>
                        <el-form-item
                            label="身份证有效期"
                            prop="enterpriseCardStartTime"
                            class="businessDate"
                            >
                            <el-date-picker
                                v-model="addMerchant.enterpriseCardStartTime"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                            >
                            </el-date-picker>
                            </el-form-item>
                            <span class="description">至</span>
                            <el-form-item
                            label=""
                            prop="enterpriseCardEndTime"
                            class="businessDate"
                            >
                            <el-date-picker
                                v-model="addMerchant.enterpriseCardEndTime"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </li>
                    <li>
                        <!-- <el-form-item label="身份证人像面" prop="enterpriseCardPositive">
                            <el-upload
                                class="upload-demo"
                                action="uploadurl"
                                list-type="picture-card"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="1"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :http-request="handleIdPositive"
                                ref="uploadFileTive"
                                :show-file-list="false"
                                v-model="addMerchant.enterpriseCardPositive">
                                <img v-if="addMerchant.enterpriseCardPositive" :src="addMerchant.enterpriseCardPositive" class="avatar"  width="148" height="148"/>
                                <i v-else class="el-icon-plus"></i>
                            </el-upload>
                            <p>请上传4:3的图片</p>
                        </el-form-item> -->
                        <enterpriseCardPositiveDialog @enterpriseCardPositiveChild="enterpriseCardPositiveChild"></enterpriseCardPositiveDialog>
                    </li>
                    <li>
                        <!-- <el-form-item label="身份证国徽面" prop="enterpriseCardSide">
                            <el-upload
                                class="upload-demo"
                                action="uploadurl"
                                list-type="picture-card"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="1"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :http-request="handleIdBack"
                                ref="uploadFileBack"
                                :show-file-list="false"
                                v-model="addMerchant.enterpriseCardSide">
                                <img v-if="addMerchant.enterpriseCardSide" :src="addMerchant.enterpriseCardSide" class="avatar"  width="148" height="148"/>
                                <i v-else class="el-icon-plus"></i>
                            </el-upload>
                            <p>请上传4:3的图片</p>
                        </el-form-item> -->
                        <enterpriseCardSideDialog @enterpriseCardSideChild="enterpriseCardSideChild"></enterpriseCardSideDialog>
                    </li>
                    <li>
                        <!-- <el-form-item label="手持证件照" prop="enterpriseCardHand">
                            <el-upload
                                class="upload-demo"
                                action="uploadurl"
                                list-type="picture-card"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="1"
                                :on-exceed="handleExceed"
                                :before-upload="beforeUpload"
                                :http-request="handleIdPositiveav"
                                ref="uploadFileTiveav"
                                :show-file-list="false"
                                v-model="addMerchant.enterpriseCardHand">
                                <img v-if="addMerchant.enterpriseCardHand" :src="addMerchant.enterpriseCardHand" class="avatar"  width="148" height="148"/>
                                <i v-else class="el-icon-plus"></i>
                            </el-upload>
                            <p>请上传4:3的图片</p>
                        </el-form-item> -->
                        <enterpriseCardHandDialog @enterpriseCardHandChild="enterpriseCardHandChild"></enterpriseCardHandDialog>
                    </li>
                </el-form>
                <li>
                    <span class="my-btn" id="go-back" @click="goBack('ruleForm')">取消</span>
                    <span class="my-btn my-back-blue" style='width:60px' @click="sumbit('ruleForm')">提交</span>
                </li>   
            </ul>
        </div>
    </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import mapDrag from "../components/Map";
import axios from "axios";
import {imageRatio} from '@/util/imageRatio'
import api from "../api/index"
import shopLogoDialog from "../components/dialog/shopLogoDialog";
import doorCardDialog from "../components/dialog/doorCardDialog";
import enterpriseCardHandDialog from "../components/dialog/enterpriseCardHandDialog";
import enterpriseCardPositiveDialog from "../components/dialog/enterpriseCardPositiveDialog";
import enterpriseCardSideDialog from "../components/dialog/enterpriseCardSideDialog";
import enterpriseLicenseDialog from "../components/dialog/enterpriseLicenseDialog";
import foodCardDialog from "../components/dialog/foodCardDialog";
import shopImgDialog from "../components/dialog/shopImgDialog";
export default {
    components: { 
        mapDrag, shopLogoDialog,doorCardDialog, shopImgDialog, 
        enterpriseCardHandDialog, foodCardDialog, enterpriseLicenseDialog,
        enterpriseCardPositiveDialog, enterpriseCardSideDialog,   
    },
    data(){    
        return{
            //地图所用
            dragData: {
                lng: null,
                lat: null,
                address: null,
                nearestJunction: null,
                nearestRoad: null,
                nearestPOI: null,
            },
            dialogVisible: false,
            //地图锁定城市 经纬度
            MapCityName: [],
            lat: "",
            lng: "",
            options: regionData,
            selectedOptions: [],
            registeredAddress: [],
            EditDisable:false,//详情不可修改注册手机号，这是登录账号
            idCardList: [
                { label: "中国大陆居民身份证", value: 1 },
                { label: "中国香港居民来往内地通行证", value: 2 },
                { label: "中国澳门居民来往内地通行证", value: 3 },
                { label: "中国台湾居民来往内地通行证", value: 4 },
                { label: "其他国家或地区居民护照", value: 5 },
            ],
            takeTime1:'',//上午开始时间
            takeTime2:'',//下午开始时间
            endTime1:'',//上午截至时间
            endTime2:'',//下午截至时间
            userRules: {
                shopName: [
                    {max: 30,required: true, message: "请输入店铺名称最多30字", trigger: "blur" },
                ],
                chargePersonName: [
                    { required: true, message: "请输入店铺负责人", trigger: "blur" },
                    {
                        pattern: /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)/,
                        message: "你的名字格式不正确",
                    },
                ],
                servicePhone: [  
                    { required: true, message: "请输入客服电话", trigger: "blur" },
                    {
                        pattern: /^((0\d{2,3}-\d{7,8})|(1[35847]\d{9}))$/,
                        message: "你的电话格式不正确",
                    },
                ],
                chargePersonPhone: [
                    { required: true, message: "请输入店铺负责人电话", trigger: "blur" },
                    {
                        pattern: /(1[35847]\d{9})$/,
                        message: "你的电话格式不正确",
                    },
                ],
                // shopTypeId: [
                //     { required: true, message: "请选择商铺类型", trigger: "change" },
                // ],
                shopAdressProvince: [
                    { required: true, message: "请选择省份和城市", trigger: "change" },
                ],
                shopAdressDetail: [
                    { required: true, message: "请输入详细地址", trigger: "blur" },
                ],
                enterpriseName: [
                    {max: 100, required: true, message: "请输入企业名称最多100字", trigger: "blur" },
                ],
                enterpriseCode: [ 
                    { required: true, message: "请输入社会信用代码", trigger: "blur" },
                    {
                        pattern: /([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
                        message: "你的社会信用代码格式不正确",
                    },
                ],
                shopPhone: [
                    { required: true, message: "请输入手机号", trigger: "blur" },
                    {
                        pattern: /(1[35847]\d{9})$/,
                        message: "你的电话格式不正确",
                    },
                ],
                enterpriseRegion: [
                    { required: true, message: "请输入注册地址", trigger: "change" },
                ],
                enterpriseAdress: [
                { required: true, message: "请输入注册详细地址", trigger: "blur" },
                ],
                enterpriseStartTime: [
                    { required: true, message: "请选择营业执照起始日期" },
                ],
                enterpriseEndTime: [
                    { required: true, message: "请选择营业执照到期时间" },
                ],
                enterpriseLicense: [
                    { required: true, message: "请选择上传营业执照/食品经营许可证", trigger: "blur" },
                ],
                shopLogo: [
                    { required: true, message: "请上传店铺Logo", trigger: "change" },
                ],
                doorCard: [
                    { required: true, message: "请选择上传门头照", trigger: "blur" },
                ],
                shopImg: [
                    { required: true, message: "请选择上传店内照片", trigger: "blur" },
                ],
                foodCard: [
                    { required: true, message: "请选择上传食品经营许可证", trigger: "blur" },
                ],
                enterpriseOperator: [
                    { required: true, message: "请输入经营者姓名", trigger: "blur" },
                    {
                        pattern: /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)/,
                        message: "你的名字格式不正确",
                    },
                ],
                enterpriseIdCard: [
                    { required: true, message: "请输入身份证号码", trigger: "blur" },
                    {
                        pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                        message: "你的身份证格式不正确",
                    },
                ],
                enterpriseCardStartTime: [
                    { required: true, message: "请选择身份证起始日期" },
                ],
                enterpriseCardEndTime: [
                    { required: true, message: "请选择身份证到期时间" },
                ],
                enterpriseCardType: [{ required: true, message: "请选择证件类型" }],
                enterpriseCardPositive: [
                    {
                        required: true,
                        message: "请选择上传身份证正面照",
                        trigger: "change",
                    },
                ],
                enterpriseCardHand:[
                    {
                        required: true,
                        message: "请选择上传手持正面照",
                        trigger: "change",
                    }
                ],
                enterpriseCardSide: [
                    {
                        required: true,
                        message: "请选择上传身份证反面照",
                        trigger: "change",
                    },
                ],
                // businessTime: [
                //   { required: true, message: "请选择营业时间", trigger: "blur" },
                // ],
                // pick: [{ required: true, message: "请选择是否自提", trigger: "blur" }],
                // mealTime: [
                //     { required: true, message: "请输入出餐时间", trigger: "blur" },
                // ],
                upAmount: [
                    { required: true, message: "请输入起送金额", trigger: "blur" },
                    {
                        pattern: /^((^[1-9][0-9]{0,5}|0)\.([0-9][1-9])$)|^(^[1-9][0-9]{0,5}|0)$/,
                        message: "整数6位，小数两位",
                    },
                ],
            },
            addMerchant: {
                shopImg:[],//店内照片
                shopLogo:'',//店铺logo
                doorCard:'',//门头照
                shopName:'',//店铺名称
                chargePersonName:'',//店铺负责人
                chargePersonPhone:'',//负责人手机号
                takeTimes:[//配送时间数组
                    {takeTime:'',endTime:''},//上午开始时间,上午截至时间
                    {takeTime:'',endTime:''},//下午开始时间,下午截至时间
                ],
                upAmount:'',//起送金额
                shopAdressProvince:'',//店铺地址!!!!!!!!!!!!!!!!!!!!!!!!!
                shopAdressCity:'',//店铺地址城市
                adname:'',//区域名
                prcode:'',//省市区编码
                shopAdressDetail:'',//店铺详细地址
                lat:'1',//店铺地址纬度!!!!!!!!!!!!!!!!!!!!!!!!
                lng:'1',//店铺地址经度!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                citycode:'1',//城市编码!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                adcode:'1',//区域编码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                enterpriseName:'',//企业名称
                enterpriseCode:'',//社会信用代码
                shopPhone:'',//注册手机号
                enterpriseRegion:'',//注册地址!!!!!!!!!!!!!!!!!!!!!
                enterpriseAdress:'',//注册详细地址
                enterpriseStartTime:'',//营业期限开始时间
                enterpriseEndTime:'',//营业期限结束时间
                enterpriseLicense:'',//营业执照
                foodCard:'',//食品经营许可证
                enterpriseOperator:'',//经营者姓名
                enterpriseCardType:'',//证件类型
                //{ label: "中国大陆居民身份证", value: 1 },
                //{ label: "中国香港居民来往内地通行证", value: 2 },
                //{ label: "中国澳门居民来往内地通行证", value: 3 },
                //{ label: "中国台湾居民来往内地通行证", value: 4 },
                //{ label: "其他国家或地区居民护照", value: 5 },
                enterpriseIdCard:'',//身份证号码
                enterpriseCardStartTime:'',//身份证有效期开始时间
                enterpriseCardEndTime:'',//身份证有效期截至时间
                enterpriseCardPositive:'',//身份证人像面
                enterpriseCardSide:'',//身份证国徽面
                enterpriseCardHand:'',//手持证件照
            },
                shopName:'',//店铺名称
                chargePersonName:'',//店铺负责人
                chargePersonPhone:'',//联系方式
                shopAdress:'',//店铺地址
                shopAdressDetail:'',//详细地址
                bondState:'',//是否缴纳保证金
                poundage:'',
                bondMoney:'',//保证金金额
                paymentMethod:'',//缴费方式
                paymentCode:'',
                paymentCard:'',
                effectiveDate:'',//生效日期选中值
                contractState:'1',
                effectiveYear:'',//有效年限
            shopLogo:'',
            enterpriseLicense:'',
            foodCard:'',
            doorCard:'',
            //上传图片
            actionUrl:'',
            dataList: "",
            fileList:[],
            fileUpUrlList:'',
            VipShopEntity:'',
            isLt2M:'',
             searchoptions:[//是否缴纳保证金
                {label:'已缴纳',value:1},
                {label:'未缴纳',value:0},
            ],
             paymentAccount:[// 缴费账号
                {label:'支付宝',value:1},
                {label:'微信',value:2},
                {label:'银行卡',value:3}
            ],
            picJudge:'',
        }
    },
    mounted(){
        console.log(api)
    },
    methods:{
        shopLogoChild(res) {
            this.addMerchant.shopLogo = res
        },
        doorCardChild(res) { 
            this.addMerchant.doorCard = res
        },
        shopImgChild(res) { 
            console.log(res)
            this.addMerchant.shopImg = res
        },
        enterpriseLicenseChild(res) { 
            console.log(res)
            this.addMerchant.enterpriseLicense = res
        },
        foodCardChild(res) { 
            console.log(res)
            this.addMerchant.foodCard = res
        },
        enterpriseCardPositiveChild(res) { 
            console.log(res)
            this.addMerchant.enterpriseCardPositive = res
        },
        enterpriseCardSideChild(res) { 
            console.log(res)
            this.addMerchant.enterpriseCardSide = res
        },
        enterpriseCardHandChild(res) { 
            console.log(res)
            this.addMerchant.enterpriseCardHand = res
        },
        //地图所用
        dragMap(data) {
            this.dragData = {
                lng: data.position.lng,
                lat: data.position.lat,
                address: data.address,
                nearestJunction: data.nearestJunction,
                nearestRoad: data.nearestRoad,
                nearestPOI: data.nearestPOI,
            };
            this.addMerchant.lng = data.position.lng; //经度
            this.addMerchant.lat = data.position.lat; //维度
            // console.log(this.dragData);
        },
        registeredAddressChange(arr) {//注册地址
            this.addMerchant.enterpriseRegion = `${CodeToText[arr[0]]}-${ CodeToText[arr[1]] }-${CodeToText[arr[2]]}`;
            // console.log(this.addMerchant.enterpriseRegion);
        },
        //店铺地址改变
        addressChange(arr) {
            this.addMerchant.shopAdress = `${CodeToText[arr[0]]}-${ CodeToText[arr[1]] }-${CodeToText[arr[2]]}`;
            this.addMerchant.shopAdressProvince = CodeToText[arr[0]];//省、市、区名字
            this.addMerchant.shopAdressCity = CodeToText[arr[1]];//店铺地址城市
            this.addMerchant.adname = CodeToText[arr[2]];//区域名
            this.addMerchant.prcode= arr[0]//省市区编码
            this.addMerchant.citycode = arr[1]
            this.addMerchant.adcode = arr[2]
            console.log(this.addMerchant)
            // 城市提交给地图-（省市区）
            this.MapCityName = [CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]];
            // console.log( this.MapCityName,'地图名')
        },
        //人像面
        handleIdPositive(params) {
            // var  formData = new FormData();
            // formData.append('file', params.file);
            // this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
            //     this.addMerchant.enterpriseCardPositive=res.data.data
            // })
            imageRatio(params.file,1).then(async result => {
                if (result) {
                    var  formData = new FormData();
                    formData.append('file', params.file);
                    this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                        this.addMerchant.enterpriseCardPositive=res.data.data.url
                    })
                }else {
                    let uid = params.uid // 去除文件列表失败文件
                    let idx = this.$refs.uploadFileTive.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.uploadFileTive.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //国徽面
        handleIdBack(params) {
            // var  formData = new FormData();
            // formData.append('file', params.file);
            // this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
            //     this.addMerchant.enterpriseCardSide=res.data.data
            // })uploadFileBack
            imageRatio(params.file,1).then(async result => {
                if (result) {
                    var  formData = new FormData();
                    formData.append('file', params.file);
                    this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                        this.addMerchant.enterpriseCardSide=res.data.data.url
                    })
                }else {
                    let uid = params.uid // 去除文件列表失败文件
                    let idx = this.$refs.uploadFileBack.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.uploadFileBack.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //手持身份证
        handleIdPositiveav(params) {
            // var  formData = new FormData();
            // formData.append('file', params.file);
            // this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
            //     this.addMerchant.enterpriseCardHand=res.data.data
            // })
            imageRatio(params.file,1).then(async result => {
                if (result) {
                    var  formData = new FormData();
                    formData.append('file', params.file);
                    this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                        this.addMerchant.enterpriseCardHand=res.data.data.url
                    })
                }else {
                    let uid = params.uid // 去除文件列表失败文件
                    let idx = this.$refs.uploadFileTiveav.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.uploadFileTiveav.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //营业执照
        handleHandHeld(params) {
            // var  formData = new FormData();
            // formData.append('file', params.file);
            // this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
            //     this.addMerchant.enterpriseLicense=res.data.data
            // })
            imageRatio(params.file,1).then(async result => {
                if (result) {
                    var  formData = new FormData();
                    formData.append('file', params.file);
                    this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                        this.addMerchant.enterpriseLicense=res.data.data.url
                    })
                }else {
                    let uid = params.uid // 去除文件列表失败文件
                    let idx = this.$refs.uploadFileHeld.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.uploadFileHeld.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //食品经营许可证
        handleLicense(params) {
            // var  formData = new FormData();
            // formData.append('file', params.file);
            // this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
            //     this.addMerchant.foodCard=res.data.data
            // })
            imageRatio(params.file,1).then(async result => {
                if (result) {
                    var  formData = new FormData();
                    formData.append('file', params.file);
                    this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                        this.addMerchant.foodCard=res.data.data.url
                    })
                }else {
                    let uid = params.uid // 去除文件列表失败文件
                    let idx = this.$refs.uploadFileLicense.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.uploadFileLicense.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //店铺logo
        uploadHttpLogo(params){
            // var  formData = new FormData();
            // formData.append('file', params.file);
            // this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
            //     this.addMerchant.shopLogo=res.data.data
            // })
            imageRatio(params.file).then(async result => {
                if (result) {
                    var  formData = new FormData();
                    formData.append('file', params.file);
                    this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                        this.addMerchant.shopLogo=res.data.data.url
                    })
                }else {
                    let uid = params.uid // 去除文件列表失败文件
                    let idx = this.$refs.uploadFileLogo.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.uploadFileLogo.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
                }
            }).catch(err => {
                console.log(err)
            })
        },
         //删除图片
        handleRemove(file, fileList) {
            console.log(file)
        },
        handlePreview(file) {
            console.log(file);
        },
        //提示上传文件个数
        handleExceed(files, fileList) {
            console.log(files)
            this.$message.warning("只能上传两张图片，请先删除，再上传新文件！");
        },
        //删除提示
        beforeRemove(file, fileList) {
            if(!this.isLt2M){
                return this.$alert('只能上传jpg/png文件，且不超过300kb', '图片上传限制', {confirmButtonText: '确定',});
            }
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //提示上传文件大小
        beforeUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 0.3;
            this.isLt2M=isLt2M
            console.log(file.size,isLt2M)
            if (!isLt2M) {
                // this.common.errorTip('上传文件大小不能超过 2MB!');
                // this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        handleRemoveShopImg(res ,file ,fileList) {//店内照片删除功能
            if(res.response.data) {
                console.log(1)
                if(file.length >=1) {
                for(var i = 0; i < file.length; i++) {
                    this.addMerchant.shopImg.splice(file[i].response.data.url,1)
                    return
                }
                }else {
                console.log(2)
                this.addMerchant.shopImg = [];
                }
            }
        },
        //店内照片 
        // handleShopImg(params){
        handleShopImg(res, file) {//店内照片
            imageRatio(file.raw).then(async result => {
                if (result) {
                    let shopImg = res.data.url
                    this.addMerchant.shopImg.push(shopImg)
                    console.log(this.addMerchant.shopImg)
                }else {
                    let uid = file.uid // 去除文件列表失败文件
                    let idx = this.$refs.uploadFileSi.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.uploadFileSi.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
                }
            }).catch(err => {
                console.log(err)
            })
            // imageRatio(params.file).then(async result => {
            //     if (result) {
            //         var  formData = new FormData();
            //         formData.append('file', params.file);
            //         this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
            //             console.log(res)
            //             let shopImg = res.data.data.url
            //             this.addMerchant.shopImg.push(shopImg)
            //             console.log(this.addMerchant.shopImg)
            //         })
            //     }else {
            //         let uid = params.uid // 去除文件列表失败文件
            //         let idx = this.$refs.uploadFileSi.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
            //         this.$refs.uploadFileSi.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
            //     }
            // }).catch(err => {
            //     console.log(err)
            // })
        },
        //门头照
        uploadHttpDc(params){
            // var  formData = new FormData();
            // formData.append('file', params.file);
            // this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
            //     this.addMerchant.doorCard=res.data.data
            // })
            imageRatio(params.file).then(async result => {
                if (result) {
                    var  formData = new FormData();
                    formData.append('file', params.file);
                    this.axios.post('/file/upload', formData, { headers: { 'content-Type': 'multipart/form-data'} }).then(res=> {
                        this.addMerchant.doorCard=res.data.data.url
                    })
                }else {
                    let uid = params.uid // 去除文件列表失败文件
                    let idx = this.$refs.uploadFileDc.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
                    this.$refs.uploadFileDc.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 取消
        goBack(ruleForm){
            this.$refs[ruleForm].clearValidate()
            this.$router.push('/index/merchantManagement')
        },
        sumbit(ruleForm){
            // var Obj = {
            //     shopLogo:this.addMerchant.shopLogo.url,//店铺logo
            //     doorCard:this.addMerchant.doorCard.url,//门头照
            //     shopName:this.addMerchant.shopName,//店铺名称
            //     chargePersonName:this.addMerchant.chargePersonName,//店铺负责人
            //     chargePersonPhone:this.addMerchant.chargePersonPhone,//负责人手机号
            //     upAmount:this.addMerchant.upAmount,//起送金额
            //     shopAdressProvince:this.addMerchant.shopAdressProvince,//店铺地址!!!!!!!!!!!!!!!!!!!!!!!!!
            //     shopAdressDetail:this.addMerchant.shopAdressDetail,//店铺详细地址
            //     // lat:this.addMerchant.lat,//店铺地址纬度!!!!!!!!!!!!!!!!!!!!!!!!
            //     // lng:this.addMerchant.lng,//店铺地址经度!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            //     // citycode:this.addMerchant.citycode,//城市编码!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            //     // adcode:this.addMerchant.adcode,//区域编码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            //     lat:1,
            //     lng:1,
            //     citycode:1,
            //     adcode:1,
            //     enterpriseName:this.addMerchant.enterpriseName,//企业名称
            //     enterpriseName:this.addMerchant.enterpriseName,//企业名称
            //     enterpriseCode:this.addMerchant.enterpriseCode,//社会信用代码
            //     shopPhone:this.addMerchant.shopPhone,//注册手机号
            //     enterpriseRegion:this.addMerchant.enterpriseRegion,//注册地址!!!!!!!!!!!!!!!!!!!!!
            //     enterpriseAdress:this.addMerchant.enterpriseAdress,//注册详细地址
            //     enterpriseStartTime:this.addMerchant.enterpriseStartTime,//营业期限开始时间
            //     enterpriseEndTime:this.addMerchant.enterpriseEndTime,//营业期限结束时间
            //     enterpriseLicense:this.addMerchant.enterpriseLicense.url,//营业执照
            //     foodCard:this.addMerchant.foodCard.url,//食品经营许可证
            //     enterpriseOperator:this.addMerchant.enterpriseOperator,//经营者姓名
            //     enterpriseCardType:this.addMerchant.enterpriseCardType,//证件类型
            //     //{ label: "中国大陆居民身份证", value: 1 },
            //     //{ label: "中国香港居民来往内地通行证", value: 2 },
            //     //{ label: "中国澳门居民来往内地通行证", value: 3 },
            //     //{ label: "中国台湾居民来往内地通行证", value: 4 },
            //     //{ label: "其他国家或地区居民护照", value: 5 },
            //     enterpriseIdCard:this.addMerchant.enterpriseIdCard,//身份证号码
            //     enterpriseCardStartTime:this.addMerchant.enterpriseCardStartTime,//身份证有效期开始时间
            //     enterpriseCardEndTime:this.addMerchant.enterpriseCardEndTime,//身份证有效期截至时间
            //     enterpriseCardPositive:this.addMerchant.enterpriseCardPositive.url,//身份证人像面
            //     enterpriseCardSide:this.addMerchant.enterpriseCardSide.url,//身份证国徽面
            //     enterpriseCardHand:this.addMerchant.enterpriseCardHand.url,//手持证件照
            // };
            this.$refs[ruleForm].validate(valid => {
                if(valid) {
                    // this.addMerchant.shopLogo=this.addMerchant.shopLogo.url;//店铺logo
                    // this.addMerchant.doorCard=this.addMerchant.doorCard.url;//门头照
                    // this.addMerchant.enterpriseLicense=this.addMerchant.enterpriseLicense.url;//营业执照
                    // this.addMerchant.foodCard=this.addMerchant.foodCard.url,//食品经营许可证
                    // this.addMerchant.enterpriseCardPositive=this.addMerchant.enterpriseCardPositive.url;//身份证人像面
                    // this.addMerchant.enterpriseCardSide=this.addMerchant.enterpriseCardSide.url;//身份证国徽面
                    // this.addMerchant.enterpriseCardHand=this.addMerchant.enterpriseCardHand.url;//手持证件照
                    this.addMerchant.takeTimes = [//配送时间数组
                        {takeTime:this.takeTime1,endTime:this.endTime1},//上午开始时间,上午截至时间
                        {takeTime:this.takeTime2,endTime:this.endTime2},//下午开始时间,下午截至时间
                    ]
                    this.addMerchant.shopImg = this.addMerchant.shopImg.toString()
                    this.axios({
                        url: "/shop/save",
                        method: "post",
                        data:this.addMerchant,
                    }).then((res) => {
                        if(res.data.code === ''){
                            this.fileUpUrlList=''
                            this.$router.push('/index/occupancyApplication')
                        }else {
                            alert(res.data.message)
                            this.addMerchant.shopImg = this.addMerchant.shopImg.split(",")
                            this.fileUpUrlList=''
                        }
                    });
                }
               
            })
            
        }
    },
    watch:{
        
    }
}
</script>

<style scoped>
    .formTit {
        height: 55px;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 50px 0;
        border-bottom: 1px solid #e6e6e6;
    }
    .serialNumber {
        width: 24px;
        height: 24px;
        background: #ff7800;
        border-radius: 4px;
        margin-right: 10px;
        color: #ffffff;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
    }
    .formName {
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        width: 200px;
    }
    .merchant-info ul li .description {
        height: 40px;
        line-height: 40px;
        width: 20px;
        text-align: center;
        margin-right: 10px;
        position: relative;
        bottom: 10px;
    }
    .merchant-info ul li p {
        font-size: 12px;
        color: #999;
    }
    .addMerchant{
        position: relative;
    }
    .merchant-info ul li{
        margin-top: 15px;
        display: flex;
        align-items: center;
    }
    .merchant-info ul li span{
        display: inline-block;
        margin-right: 20px;
        width: 120px;
        text-align: right;
    }
    
   #go-back{
        width: 60px;
        padding: 7px;
        text-align: center;
        margin-left: 64px;
   }
    /* 合同状态 */
   label input{
       height: 12px;
   }

   /* 上传按钮 */
   .upload-demo{
       display: inline-block;
   }
   .merchant-info ul li .my-btn{
       text-align: center;
   }
   .my-btn:hover{
       cursor: pointer;
   }
</style>